import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_state_manager/src/simple/get_view.dart';
import 'package:vischat/data/models/panel_item.dart';
import 'package:vischat/modules/home/socialize/chat/widgets/message_options/message_options_controller.dart';

class MessageOptions extends GetView<MessageOptionsController> {
  const MessageOptions({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.h, // 面板高度
      color: Color(0xFFEDEDED),
      child: Column(
        children: [
          Divider(),
          Expanded(
            child: PageView(
              controller: controller.pageController,
              onPageChanged: controller.changePage,
              children: [
                _buildButtonGrid(controller.page1Items), // 第一页
              ],
            ),
          ),

          // 底部小圆点指示器
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List.generate(
              1,
              (index) => Padding(
                padding: EdgeInsets.all(4.w),
                child: Container(
                  width: 8.w,
                  height: 8.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color:
                        controller.currentPage == index
                            ? Colors.blue
                            : Colors.grey[300],
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 10.h),
        ],
      ),
    );
  }

  // 构建功能按钮网格布局
  Widget _buildButtonGrid(List<PanelItem> items) {
    return GridView.builder(
      padding: EdgeInsets.all(16.w),
      physics: const NeverScrollableScrollPhysics(), // 禁止滚动（PageView 接管）
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4, // 每行 4 个按钮
        childAspectRatio: 1.0,
        mainAxisSpacing: 10.h,
        crossAxisSpacing: 10.w,
      ),
      itemCount: items.length,
      itemBuilder: (_, index) {
        final item = items[index];
        return GestureDetector(
          onTap: item.onTap,
          child: Column(
            children: [
              Container(
                width: 112.w,
                height: 112.w,
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: BorderRadius.circular(10.r),
                ),
                child: Icon(item.icon, size: 56.sp),
              ),
              SizedBox(height: 10.h),
              Text(item.label, style: TextStyle(fontSize: 24.sp)),
            ],
          ),
        );
      },
    );
  }
}
